<!--
 * @Description: 基础表格
 * @Author: seadon
 * @LastEditors: seadon
 * @Date: 2021-03-29 09:13:48
 * @LastEditTime: 2022-09-23 15:39:02
-->
<template>
	<Table
		v-bind="getTableProps"
		:class="{
			['rok-base-table']: true,
			['fixed-pagination']: getTableProps.fixedPagination,
		}"
		@change="onChange"
	>
		<template v-for="item in Object.keys($slots)" #[item]="data" :key="item">
			<slot :name="item" v-bind="data"></slot>
		</template>
		<template
			v-for="column in columns"
			#[`header-${column.dataIndex}`]
			:key="column.dataIndex"
		>
			<HeaderCell :column="column" />
		</template>
	</Table>
</template>
<script lang="ts">
import { defineComponent, computed, unref, toRaw, watchEffect } from 'vue'
import { cloneDeep } from 'lodash'
import { Table } from 'ant-design-vue'
import { isDef, setCssVar } from '@/utils'
import { basicProps } from './props'
import HeaderCell from './components/HeaderCell.vue'
import { useDataSource } from './hooks/useDataSource'
import { renderEditCell } from './components/editable'
import { createTableContext } from './hooks/useTableContext'
import { BasicTableProps, TableActionType } from './types/table'
import './index.less'

export default defineComponent({
	name: 'base-table',
	props: basicProps,
	components: {
		Table,
		HeaderCell,
	},
	emits: [
		'table-change',
		'edit-end',
		'edit-cancel',
		'edit-row-end',
		'edit-change',
		'header-change',
	],
	setup(props, { emit }) {
		const getProps = computed(() => {
			return { ...props } as BasicTableProps
		})
		const { updateTableData } = useDataSource(getProps)
		const tableHeight = '220px'

		// 列表操作
		const tableAction: TableActionType = {
			updateTableData,
			emit,
		}

		// 获取列数据
		const getEditCell = computed(() => {
			const columns = cloneDeep(props.columns)
			return columns.map((column: any) => {
				const { edit, editRow } = column

				if (edit || editRow) {
					column.customRender = renderEditCell(column)
				}
				return column
			})
		})

		// 获取props数据
		const getTableProps = computed(() => {
			const propsData: Recordable = {
				size: 'small',
				bordered: true,
				pagination: true,
				...unref(getProps),
				columns: toRaw(unref(getEditCell)),
			}
			return propsData
		})

		createTableContext({ ...tableAction, getTableProps })

		watchEffect(() => {
			if (unref(getTableProps).fixedPagination) {
				const collapsed = undefined

				setCssVar(
					'--pagination-width',
					isDef(collapsed)
						? `calc(100% - ${collapsed ? 80 : 220}px - ${16 * 2}px)`
						: `calc(100% - 32px)`
				)
				setCssVar('--table-wrapper-min-height', unref(tableHeight))
				if (
					!(props.instance as any).props?.isFixedHeader
				) {
					setCssVar(
						'--table-body-min-height',
						`calc(${unref(tableHeight)} - 56px)`
					)
				}
				// setCssVar('--pagination-margin-left', isDef(collapsed) ? '0' : '-16px')
			}
		})

		const onChange = (...args: any[]) => {
			emit('table-change', ...args)
		}

		return {
			onChange,
			getTableProps,
			columns: getEditCell,
		}
	},
})
</script>
